<script lang="ts" setup>
/** 单次换电表格 */
import { defineAsyncComponent } from 'vue'
import { batterySwapDetailOrderTableCol } from '@/api/user/types/user'
import { paymentType } from '@/utils/formatter'
import { useRouter } from 'vue-router'

defineProps<{
  data: batterySwapDetailOrderTableCol[]
  loading: boolean
}>()
const router = useRouter()
/**
 * 查看所属门店 弹出框
 */
const StoreInfo = defineAsyncComponent(() => import('@/components/popover/StoreInfo.vue'))
const operatorsInfo = (row: batterySwapDetailOrderTableCol) => {
  router.push({
    name: 'OperatorsInfo',
    query: {
      merchantId: row.storeInfo?.merchantId,
      storeId: row.storeInfo?.storeId
    }
  })
}
</script>

<template>
  <el-table :data="data" class="no-border" v-loading="loading">
    <el-table-column prop="mobilePhone" label="手机号" min-width="150" align="center" />
    <el-table-column prop="userName" label="姓名" align="center" />
    <el-table-column prop="orderAmount" label="价格" align="center" />
    <el-table-column prop="payment" label="支付方式" :formatter="paymentType" align="center" />
    <el-table-column prop="payTime" label="支付时间" min-width="200" align="center" />
    <el-table-column prop="changeStatus" label="换电情况" align="center">
      <template #default="scope">
        <span
          :style="{
            color:
              scope.row.changeStatus === '待换电'
                ? 'var(--xy-warning-color)'
                : 'var( --xy-grey-text-color)'
          }"
          >{{ scope.row.changeStatus }}</span
        >
      </template>
    </el-table-column>
    <el-table-column prop="boxCode" label="电柜编号" align="center" />
    <el-table-column prop="changeTime" label="换电时间" align="center" />
    <el-table-column prop="putInDoor" label="还电仓门" align="center" />
    <el-table-column prop="takeOutDoor" label="取电仓门" align="center" />
    <el-table-column label="所属门店" align="center">
      <template #default="scope">
        <el-popover
          v-if="scope.row.storeInfo"
          trigger="hover"
          popper-class="store-info_popover"
          width="210px"
        >
          <store-info :data="scope.row.storeInfo" :is-divider="true">
            <template #button>
              <el-button plain link w-full @click="operatorsInfo(scope.row)">进入门店 ></el-button>
            </template>
          </store-info>
          <template #reference>
            <el-button link type="primary" class="is-open">查看</el-button>
          </template>
        </el-popover>
      </template> </el-table-column
    >>
  </el-table>
</template>

<style scoped></style>
